/*
  学习目标：使用children属性，模拟vue中插槽- 作用域插槽
  1. 父组件内可以使用子组件声明的数据
  2. 父组件内，可以决定如何渲染子组件, 灵活复用子组件
  // 2.1 数组用ul>li渲染
  // 2.2 用div + h1渲染
  
*/

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        <Child>
          {(data) => {
            return <h1>{data}</h1>;
          }}
        </Child>
        <Child>
          {(data) => {
            return (
              <div>
                {data.map((item, index) => {
                  return <h1 key={index}>{item}</h1>;
                })}
              </div>
            );
          }}
        </Child>
      </div>
    );
  }
}

class Child extends React.Component {
  state = {
    list: ['苹果', '香蕉', '榴莲'],
  };

  render() {
    const { children } = this.props;
    const { list } = this.state;
    return <div className="child">{children(list)}</div>;
  }
}
